<template>
  <!-- 项目中心查看弹窗 -->
  <div class="projectCenter-check">
    <el-dialog
      title="详细信息"
      :visible.sync="checkDialog"
      width="65%"
      class="detail"
      top="6vh"
    >
      <div class="detail-part1">
        <div class="tagBox1">行业大类</div>
        <div>商业服务</div>
        <div class="tagBox2">行业小类</div>
        <div>服装贸易</div>
      </div>
      <el-steps :active="4" align-center>
        <el-step title="意向登记" description="2021-04-12 17:28"></el-step>
        <el-step title="意向协定" description="2021-04-12 17:28"></el-step>
        <el-step title="合同签批" description="2021-04-12 17:28"></el-step>
        <el-step title="企业入驻" description="2021-04-12 17:28"></el-step>
      </el-steps>
      <div class="detail-part2">
        <img src="../../assets/images/notice.png" alt="" />
        <span>【意向协定】佳之于贸易有限公司添加了意向协议信息</span>
      </div>
      <div class="detail-part3">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="项目跟踪" name="one"
            ><ProjectTracking
          /></el-tab-pane>
          <el-tab-pane label="风险预警" name="two"><RiskWarning /></el-tab-pane>
          <el-tab-pane label="项目档案" name="three"
            ><ProjectArchives
          /></el-tab-pane>
          <el-tab-pane label="基础信息" name="four">
            <BasicInformation
          /></el-tab-pane>
        </el-tabs>
        <div class="information-display">
          <div class="contacts">
            <div class="title">联系人</div>
            <div class="content">
              <p>
                <span>张三丰</span>
                <span>招商经理</span>
                <span>18565511234</span>
              </p>
              <p>
                <span>张三丰</span>
                <span>招商经理</span>
                <span>18565511234</span>
              </p>
              <p>
                <span>张三丰</span>
                <span>招商经理</span>
                <span>18565511234</span>
              </p>
            </div>
          </div>
          <div class="memorandum">
            <div class="title">备忘录</div>
            <div class="content">
              <p>
                <span>2022-04-12 14：34:45</span>
                <span>联系客户招商经理杨洋沟通</span>
              </p>
              <p>
                <span>2022-04-12 14：34:45</span>
                <span>联系客户招商经理杨洋沟通</span>
              </p>
              <p>
                <span>2022-04-12 14：34:45</span>
                <span>联系客户招商经理杨洋沟通</span>
              </p>
            </div>
          </div>
          <div class="competitors">
            <div class="title">竞争对象</div>
            <div class="content">
              <p>
                <span>云栖科技</span>
                <span>李承 价格便宜、功能不全面</span>
              </p>
              <p>
                <span>云栖科技</span>
                <span>李承 价格便宜、功能不全面</span>
              </p>
              <p>
                <span>云栖科技</span>
                <span>李承 价格便宜、功能不全面</span>
              </p>
            </div>
          </div>
          <div class="people-concerned">
            <div class="title">关注人员</div>
            <div class="user">
              <p>
                <span class="el-icon-user"></span>
                <span>总经理</span>
                <span>张三丰</span>
              </p>
              <p>
                <span class="el-icon-user"></span>
                <span>总经理</span>
                <span>张三丰</span>
              </p>
              <p>
                <span class="el-icon-user"></span>
                <span>总经理</span>
                <span>张三丰</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ProjectTracking from './ProjectTracking.vue';
import RiskWarning from './RiskWarning.vue';
import ProjectArchives from './ProjectArchives.vue';
import BasicInformation from './BasicInformation.vue';
export default {
  name: 'ProjectCenterDetailWindow',
  components: {
    ProjectTracking,
    RiskWarning,
    ProjectArchives,
    BasicInformation,
  },
  data: function () {
    return {
      // 详情信息弹窗
      checkDialog: false,
      activeName: 'one',
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="less">
// 详情信息弹窗
.projectCenter-check {
  .detail .el-dialog {
    height: 870px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    .el-dialog__header {
      width: 100%;
      height: 47px;
      color: #ffffff;
      background: #0bb197;
      padding: 0;
      .el-dialog__title {
        line-height: 47px;
        font-size: 15px;
        color: #ffffff;
        margin-left: 20px;
      }
      .el-dialog__headerbtn .el-dialog__close {
        color: #ffffff;
      }
    }
    .el-dialog__body {
      width: 95%;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      .detail-part1 {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        .tagBox1 {
          color: #ffffff;
          width: 76px;
          height: 24px;
          text-align: center;
          line-height: 24px;
          font-size: 12px;
          background: #f56c6c;
          border: 1px solid #f56c6c;
        }
        .tagBox2 {
          color: #ffffff;
          width: 76px;
          height: 24px;
          text-align: center;
          line-height: 24px;
          font-size: 12px;
          background: #67c23a;
          border: 1px solid #67c23a;
          margin-left: 20px;
        }
        div {
          color: #999;
          width: 99px;
          height: 24px;
          text-align: center;
          line-height: 24px;
          border: 1px solid #999;
        }
      }
      .el-steps {
        width: 100%;
        .el-step__head.is-finish {
          color: #0bb197;
          border-color: #0bb197;
        }
        .el-step__title.is-finish {
          color: #0bb197;
        }
        .el-step__description.is-finish {
          color: #0bb197;
        }
      }
      .detail-part2 {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .detail-part3 {
        width: 100%;
        display: flex;
        .el-tabs {
          width: 64%;
          .el-tabs__item.is-active {
            color: #0bb197;
          }
          .el-tabs__item:hover {
            color: #0bb197;
          }
          .el-tabs__active-bar {
            background-color: #0bb197;
          }
        }
        .information-display {
          width: 36%;
          height: 580px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;
          .contacts,
          .memorandum,
          .competitors,
          .people-concerned {
            width: 398px;
            height: 126px;
            border: 1px solid rgb(194, 191, 191);
            border-radius: 5px;
            .title {
              width: 100%;
              height: 40px;
              line-height: 40px;
              text-align: center;
              font-size: 14px;
              font-weight: bold;
            }
            .content {
              width: 100%;
              flex: 1;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-evenly;
              p {
                width: 100%;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
              }
            }
            .user {
              flex: 1;
              display: flex;
              align-items: center;
              p {
                width: 15%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-evenly;
                margin-left: 20px;
                [class*=' el-icon-'],
                [class^='el-icon-'] {
                  font-size: 35px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
